<template>
  <div class="container">
    <h1 class="game-title">{{ jobDetails.job_name }}</h1>
    <div class="all-details-box" v-if="jobDetails">
      <div class="detail-box">
        <span class="label">公司：</span>
        <span class="info">{{ jobDetails.company_name }}</span>
      </div>
      <div class="detail-box">
        <span class="label">工资：</span>
        <span class="info">{{ jobDetails.salary }}</span>
      </div>
      <div class="detail-box">
        <span class="label">就业经验：</span>
        <span class="info">{{ jobDetails.employment_experience }}</span>
      </div>
      <div class="detail-box">
        <span class="label">地址：</span>
        <span class="info">{{ jobDetails.address }}</span>
      </div>
      <div class="detail-box">
        <span class="label">联系人姓名：</span>
        <span class="info">{{ jobDetails.contact_name }}</span>
      </div>
      <div class="detail-box">
        <span class="label">联系电话：</span>
        <span class="info">{{ jobDetails.contact_phone }}</span>
      </div>
      <div class="detail-box">
        <h2 class="description-title">职位描述</h2>
        <p class="description-content">
          {{ jobDetails.position_description }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'JobDetailsPage',
  data() {
    return {
      jobDetails: null,
    };
  },
  created() {
    this.fetchJobDetails();
  },
  methods: {
    fetchJobDetails() {
      const jobName = this.$route.params.jobName;
      axios.get(`http://localhost:8099/jobs/${jobName}`)
          .then(response => {
            this.jobDetails = response.data;
            console.log(response.data);
          })
          .catch(error => {
            console.error('获取职位详情时出错:', error);
          });
    }
  }
};
</script>

<style>
.results-container {
  text-align: center;
  padding: 20px;
}

.search-results {
  margin-top: 20px;
}

.search-results ul {
  list-style-type: none;
  padding: 0;
}

.search-results li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.result-item {
  border: 1px solid #000; /* 黑色边框 */
  padding: 10px;
  background-color: #fff; /* 白色背景 */
  margin: 10px 0; /* 上下间距 */
  border-radius: 5px; /* 圆角边框 */
}

.all-details-box {
  border: 1px solid #000; /* 黑色边框 */
  background-color: #fff; /* 白色背景 */
  padding: 20px;
  margin: 20px 0;
  border-radius: 5px;
}

.detail-box {
  margin-bottom: 10px;
}

.label {
  font-weight: bold;
}

.no-results {
  padding: 20px;
  background-color: #f8d7da; /* 设置背景色，以确保可见性 */
  border: 1px solid #f5c6cb; /* 设置边框 */
  border-radius: 5px; /* 设置圆角 */
}

.no-results .clickable-text {
  margin-top: 10px;
  font-size: 16px;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
}

.no-results .clickable-text:hover {
  color: #0056b3;
}
</style>